<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
//引入cesium 引入样式 引入生命周期挂载
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

//设置根目录静态资源 /代表根目录public
window.CESIUM_BASE_URL = '/';

onMounted(async () => {
  console.log('Cesium', Cesium);
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 是否显示信息窗口
    infoBox: true,
    //添加直接运行动画
    shouldAnimate: true,
    //添加默认地形
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestVertexNormals: true,
      requestWaterMask: true,
    }),
  });

  //设置沙箱允许使用js
  var iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
  iframe.setAttribute(
    'sandbox',
    'allow-same-origin allow-scripts allow-popups allow-forms'
  );
  iframe.setAttribute('src', '');

  let tiles3d = await Cesium.createOsmBuildingsAsync();
  const osmBuildings = viewer.scene.primitives.add(tiles3d);
  //广州塔
  var postion = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000);
  viewer.camera.flyTo({
    destination: postion,
    duration: 2,
  });

  //建筑物颜色设置
  // tiles3d.style = new Cesium.Cesium3DTileStyle({
  //   //支持字符串
  //   // color: "color('yellow')",
  //   //支持rgba
  //   // color: 'rgba(225,225,0,0.5)',
  //   //支持16进制
  //   color: "color('#ff0')",
  //   show: true,
  // });

  //建筑物类型条件判断
  tiles3d.style = new Cesium.Cesium3DTileStyle({
    //定义变量
    defines: {
      distance:
        "distance(vec2(${feature['cesium#longitude']},${feature['cesium#latitude']}),vec2(113.3191, 23.109))",
    },
    color: {
      //特征
      conditions: [
        ['${distance} < 0.01', "color('rgba(0,0,50,0.7)')"],
        ['${distance} < 0.02', "color('rgba(0,0,50,0.5)')"],
        ['${distance} < 0.04', "color('rgba(0,0,50,0.2)')"],
        ['true', "color('white')"],
      ],
    },
    show: "${distance} < 0.04 && ${feature['building']} === 'apartments'",
  });
});
</script>

<style>
/* 初始化边距 */
* {
  margin: 0;
  padding: 0;
}
/* 初始化模型和屏幕占位 */
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
